<div id="cards" class="page-layout simple fullwidth">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

        <div fxLayout="column" fxLayoutAlign="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">User Interface</span>
            </div>
            <div class="h2 mt-16">Cards</div>
        </div>

        <div>
            <mat-slide-toggle color="primary" (change)="toggleView()">
                View Source
            </mat-slide-toggle>
        </div>

    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content" [ngClass]="this.view">

        <div class="cards">

            <!-- CARD 1 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card1.jpg">

                        <div class="p-16">
                            <div class="h1">Kangaroo Valley Safari</div>
                            <div class="h4 secondary-text">Free on Thursdays</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card1.jpg">

                                <div class="p-16">
                                    <div class="h1">Kangaroo Valley Safari</div>
                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their content and quantity can vary greatly.
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 1 -->

            <!-- CARD 2 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card1.jpg">

                        <div class="p-16">
                            <div class="h1">Kangaroo Valley Safari</div>
                            <div class="h4 secondary-text">Free on Thursdays</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">SHARE</button>
                            <button mat-button color="accent">EXPLORE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card1.jpg">

                                <div class="p-16">
                                    <div class="h1">Kangaroo Valley Safari</div>
                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their content and quantity can vary greatly.
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">SHARE</button>
                                    <button mat-button color="accent">EXPLORE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 2 -->

            <!-- CARD 3 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16">
                            <div class="h1">Kangaroo Valley Safari</div>
                            <div class="h4 secondary-text">Free on Thursdays</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16">
                                    <div class="h1">Kangaroo Valley Safari</div>
                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their content and quantity can vary greatly.
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 3 -->

            <!-- CARD 4 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card indigo">

                        <div class="p-16">
                            <div class="h1">Kangaroo Valley Safari</div>
                            <div class="h4 secondary-text">Free on Thursdays</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            All cards can be mixed with Fuse Color Classes to have different colors. This greatly
                            increases the unique variations of all cards. Cards provide context and an entry point to
                            more robust information and views, and their content and quantity can vary greatly.
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button>SHARE</button>
                            <button mat-button>EXPLORE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card indigo">

                                <div class="p-16">
                                    <div class="h1">Kangaroo Valley Safari</div>
                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    All cards can be mixed with Fuse Color Classes to have different colors. This
                                    greatly increases the unique variations of all cards. Cards provide context and an
                                    entry point to more robust information and views, and their content and quantity can
                                    vary greatly.
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button>SHARE</button>
                                    <button mat-button>EXPLORE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 4 -->

            <!-- CARD 5 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card1.jpg">

                        <div class="p-16">
                            <div class="h1">Kangaroo Valley Safari</div>
                            <div class="h4 secondary-text">Free on Thursdays</div>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card1.jpg">

                                <div class="p-16">
                                    <div class="h1">Kangaroo Valley Safari</div>
                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 5 -->

            <!-- CARD 6 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card1.jpg">

                        <div class="p-16 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card1.jpg">

                                <div class="p-16 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their content and quantity can vary greatly.
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 6 -->

            <!-- CARD 7 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="position-relative">
                            <img src="assets/images/cards/card3.jpg">
                            <div class="position-absolute font-size-20 fuse-white-fg p-16 align-left align-bottom">
                                Top 10 Holiday Locations
                            </div>
                        </div>

                        <div class="p-16">
                            <div class="h4 secondary-text">Number 10</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards are a convenient means of displaying content composed of different elements.
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">SHARE</button>
                            <button mat-button color="accent">EXPLORE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="position-relative">
                                    <img src="assets/images/cards/card3.jpg">
                                    <div class="position-absolute font-size-20 fuse-white-fg p-16 align-left align-bottom">
                                        Top 10 Holiday Locations
                                    </div>
                                </div>

                                <div class="p-16">
                                    <div class="h4 secondary-text">Number 10</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards are a convenient means of displaying content composed of different elements.
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">SHARE</button>
                                    <button mat-button color="accent">EXPLORE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 7 -->

            <!-- CARD 8 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">

                            <div class="pr-16">
                                <div class="h4 secondary-text">Travel</div>
                                <div class="h1">Big City Life</div>
                            </div>

                            <div class="w-80 h-80">
                                <img src="assets/images/cards/card2-small.jpg">
                            </div>

                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">READ</button>
                            <button mat-button color="accent">SHARE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">

                                    <div class="pr-16">
                                        <div class="h4 secondary-text">Travel</div>
                                        <div class="h1">Big City Life</div>
                                    </div>

                                    <div class="w-80 h-80">
                                        <img src="assets/images/cards/card2-small.jpg">
                                    </div>

                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their content and quantity can vary greatly.
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">READ</button>
                                    <button mat-button color="accent">SHARE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 8 -->

            <!-- CARD 9 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card3.jpg">

                        <div class="p-16">
                            <div class="h1">Top Winter Locations</div>
                            <div class="h4 secondary-text">More than 200 locations</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
                            <div fxLayout="row" fxLayoutAlign="start center">
                                <button mat-button color="accent">SHARE</button>
                                <button mat-button color="accent">EXPLORE</button>
                            </div>

                            <button mat-icon-button aria-label="expand card"
                                    (click)="card9Expanded = !card9Expanded">
                                <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon>
                                <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon>
                            </button>
                        </div>

                        <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
                            <div class="card-expanded-content">
                                Card content that exceeds the maximum card height is truncated and does not scroll, but
                                the card can be expanded. Once expanded, the card may exceed the maximum height of the
                                view. In this case, the card will scroll with the card collection.
                            </div>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card3.jpg">

                                <div class="p-16">
                                    <div class="h1">Top Winter Locations</div>
                                    <div class="h4 secondary-text">More than 200 locations</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their
                                    content and quantity can vary greatly.
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
                                    <div fxLayout="row" fxLayoutAlign="start center">
                                        <button mat-button color="accent">SHARE</button>
                                        <button mat-button color="accent">EXPLORE</button>
                                    </div>

                                    <button mat-icon-button aria-label="expand card"
                                            (click)="card9Expanded = !card9Expanded">
                                        <mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon>
                                        <mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon>
                                    </button>
                                </div>

                                <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
                                    <div class="card-expanded-content">
                                        Card content that exceeds the maximum card height is truncated and does not
                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
                                        maximum height of the view. In this case, the card will scroll with the card
                                        collection.
                                    </div>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 9 -->

            <!-- CARD 10 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card2.jpg">

                        <div class="p-16">
                            <div class="h1">Top eastern road trips</div>
                            <div class="h4 secondary-text">2,000 miles of wonder</div>
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
                            <div fxLayout="row" fxLayoutAlign="start center">
                                <button mat-button color="accent">SHARE</button>
                                <button mat-button color="accent">EXPLORE</button>
                            </div>

                            <button mat-icon-button aria-label="expand card"
                                    (click)="card10Expanded = !card10Expanded">
                                <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
                                <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
                            </button>
                        </div>

                        <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
                            <div class="card-expanded-content">
                                Card content that exceeds the maximum card height is truncated and does not scroll, but
                                the card can be expanded. Once expanded, the card may exceed the maximum height of the
                                view. In this case, the card will scroll with the card collection.
                            </div>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card2.jpg">

                                <div class="p-16">
                                    <div class="h1">Top eastern road trips</div>
                                    <div class="h4 secondary-text">2,000 miles of wonder</div>
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
                                    <div fxLayout="row" fxLayoutAlign="start center">
                                        <button mat-button color="accent">SHARE</button>
                                        <button mat-button color="accent">EXPLORE</button>
                                    </div>

                                    <button mat-icon-button aria-label="expand card"
                                            (click)="card10Expanded = !card10Expanded">
                                        <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
                                        <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
                                    </button>
                                </div>

                                <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
                                    <div class="card-expanded-content">
                                        Card content that exceeds the maximum card height is truncated and does not
                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
                                        maximum height of the view. In this case, the card will scroll with the card
                                        collection.
                                    </div>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 10 -->

            <!-- CARD 11 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
                            <img class="w-40 h-40 border-radius-100" src="assets/images/avatars/Christy.jpg">

                            <div class="ml-16">
                                <div class="text-bold">Christy</div>
                                <div class="h5 text-bold secondary-text">20 mins. ago</div>
                            </div>
                        </div>

                        <img src="assets/images/cards/card1.jpg">

                        <div class="p-16">
                            <div class="h1">Kangaroo Valley Safari</div>
                            <div class="h4 secondary-text">Free on Thursdays</div>
                        </div>

                        <div class="p-16 pt-0 line-height-1.75">
                            Cards provide context and an entry point to more robust information and views, and their
                            content and quantity can vary greatly.
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
                                    <img class="w-40 h-40 border-radius-100" src="assets/images/avatars/Christy.jpg">

                                    <div class="ml-16">
                                        <div class="text-bold">Christy</div>
                                        <div class="h5 text-bold secondary-text">20 mins. ago</div>
                                    </div>
                                </div>

                                <img src="assets/images/cards/card1.jpg">

                                <div class="p-16">
                                    <div class="h1">Kangaroo Valley Safari</div>
                                    <div class="h4 secondary-text">Free on Thursdays</div>
                                </div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    Cards provide context and an entry point to more robust information and views, and
                                    their content and quantity can vary greatly.
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 11 -->

            <!-- CARD 12 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card2.jpg">

                        <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="end center">
                            <button mat-icon-button aria-label="add to favorites">
                                <mat-icon>favorite</mat-icon>
                            </button>

                            <button mat-icon-button aria-label="bookmark">
                                <mat-icon>bookmark</mat-icon>
                            </button>

                            <button mat-icon-button aria-label="send location">
                                <mat-icon>location_on</mat-icon>
                            </button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card2.jpg">

                                <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="end center">
                                    <button mat-icon-button aria-label="add to favorites">
                                        <mat-icon>favorite</mat-icon>
                                    </button>

                                    <button mat-icon-button aria-label="bookmark">
                                        <mat-icon>bookmark</mat-icon>
                                    </button>

                                    <button mat-icon-button aria-label="send location">
                                        <mat-icon>location_on</mat-icon>
                                    </button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 12 -->

            <!-- CARD 13 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card variable-width">

                        <div class="position-relative">
                            <img src="assets/images/cards/card3-square.jpg">
                            <div class="position-absolute font-size-20 fuse-white-fg p-16 align-left align-bottom">
                                Winter
                            </div>
                        </div>

                        <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="center center">
                            <button mat-icon-button aria-label="add to favorites">
                                <mat-icon>favorite</mat-icon>
                            </button>

                            <button mat-icon-button aria-label="bookmark">
                                <mat-icon>bookmark</mat-icon>
                            </button>

                            <button mat-icon-button aria-label="send location">
                                <mat-icon>location_on</mat-icon>
                            </button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card variable-width">

                                <div class="position-relative">
                                    <img src="assets/images/cards/card3-square.jpg">
                                    <div class="position-absolute font-size-20 fuse-white-fg p-16 align-left align-bottom">
                                        Winter
                                    </div>
                                </div>

                                <div class="px-16 py-4" fxLayout="row" fxLayoutAlign="center center">
                                    <button mat-icon-button aria-label="add to favorites">
                                        <mat-icon>favorite</mat-icon>
                                    </button>

                                    <button mat-icon-button aria-label="bookmark">
                                        <mat-icon>bookmark</mat-icon>
                                    </button>

                                    <button mat-icon-button aria-label="send location">
                                        <mat-icon>location_on</mat-icon>
                                    </button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 13 -->

            <!-- CARD 14 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">

                            <div class="pr-16">
                                <div class="h1">Brooklyn</div>
                                <div class="h4 secondary-text">Travel guide</div>
                            </div>

                            <div class="w-80 h-80">
                                <img src="assets/images/cards/card2-small.jpg">
                            </div>

                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">READ</button>
                            <button mat-button color="accent">SHARE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">

                                    <div class="pr-16">
                                        <div class="h1">Brooklyn</div>
                                        <div class="h4 secondary-text">Travel guide</div>
                                    </div>

                                    <div class="w-80 h-80">
                                        <img src="assets/images/cards/card2-small.jpg">
                                    </div>

                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">READ</button>
                                    <button mat-button color="accent">SHARE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 14 -->

            <!-- CARD 15 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">

                            <div class="pr-16">
                                <div class="h1">Brooklyn</div>
                                <div class="h4 secondary-text">Travel guide</div>
                            </div>

                            <div class="w-120 h-120">
                                <img src="assets/images/cards/card2-medium.jpg">
                            </div>

                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">READ</button>
                            <button mat-button color="accent">SHARE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">

                                    <div class="pr-16">
                                        <div class="h1">Brooklyn</div>
                                        <div class="h4 secondary-text">Travel guide</div>
                                    </div>

                                    <div class="w-120 h-120">
                                        <img src="assets/images/cards/card2-medium.jpg">
                                    </div>

                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">READ</button>
                                    <button mat-button color="accent">SHARE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 15 -->

            <!-- CARD 16 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">

                            <div class="pr-16">
                                <div class="h1">Brooklyn</div>
                                <div class="h4 secondary-text">Travel guide</div>
                            </div>

                            <div class="w-160 h-160">
                                <img src="assets/images/cards/card2-large.jpg">
                            </div>

                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">READ</button>
                            <button mat-button color="accent">SHARE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">

                                    <div class="pr-16">
                                        <div class="h1">Brooklyn</div>
                                        <div class="h4 secondary-text">Travel guide</div>
                                    </div>

                                    <div class="w-160 h-160">
                                        <img src="assets/images/cards/card2-large.jpg">
                                    </div>

                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">READ</button>
                                    <button mat-button color="accent">SHARE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 16 -->

            <!-- CARD 17 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <img src="assets/images/cards/card2.jpg">

                        <div class="p-16">
                            <div class="h1">Coffee NewYork</div>
                            <div class="h5 secondary-text">
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
                                    <mat-icon class="s-16 amber-fg">star</mat-icon>
                                    <mat-icon class="s-16 amber-fg">star_half</mat-icon>
                                    <div class="ml-8 secondary-text">4.7</div>
                                    <div class="ml-4 secondary-text">(51)</div>
                                </div>
                            </div>
                        </div>

                        <div class="px-16 line-height-1.75">
                            Small plates, salads & sandwiches in an intimate setting with 12 indoor seats plus patio
                            seating.
                        </div>

                        <div class="card-divider"></div>

                        <div class="p-16 pt-0 line-height-1.75">
                            <div class="mb-16 text-bold">Tonight's Availability</div>
                            <div fxLayout="row" fxLayoutAlign="start center">
                                <mat-icon class="mr-16">access_time</mat-icon>
                                <mat-button-toggle-group>
                                    <mat-button-toggle value="0530PM">
                                        5:30PM
                                    </mat-button-toggle>
                                    <mat-button-toggle value="0730PM" [checked]="true">
                                        7:30PM
                                    </mat-button-toggle>
                                    <mat-button-toggle value="0900PM">
                                        9:00PM
                                    </mat-button-toggle>
                                </mat-button-toggle-group>
                            </div>
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">RESERVE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <img src="assets/images/cards/card2.jpg">

                                <div class="p-16">
                                    <div class="h1">Coffee NewYork</div>
                                    <div class="h5 secondary-text">
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
                                            <mat-icon class="s-16 amber-fg">star</mat-icon>
                                            <mat-icon class="s-16 amber-fg">star_half</mat-icon>
                                            <div class="ml-8 secondary-text">4.7</div>
                                            <div class="ml-4 secondary-text">(51)</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="px-16 line-height-1.75">
                                    Small plates, salads & sandwiches in an intimate setting with 12 indoor seats plus
                                    patio
                                    seating.
                                </div>

                                <div class="card-divider"></div>

                                <div class="p-16 pt-0 line-height-1.75">
                                    <div class="mb-16 text-bold">Tonight's Availability</div>
                                    <div fxLayout="row" fxLayoutAlign="start center">
                                        <mat-icon class="mr-16">access_time</mat-icon>
                                        <mat-button-toggle-group>
                                            <mat-button-toggle value="0530PM">
                                                5:30PM
                                            </mat-button-toggle>
                                            <mat-button-toggle value="0730PM" [checked]="true">
                                                7:30PM
                                            </mat-button-toggle>
                                            <mat-button-toggle value="0900PM">
                                                9:00PM
                                            </mat-button-toggle>
                                        </mat-button-toggle-group>
                                    </div>
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">RESERVE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 17 -->

            <!-- CARD 18 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16">
                            <div class="h1">San Francisco</div>
                            <div class="h4 secondary-text">Mon, 12:30 PM, Mostly Sunny</div>
                        </div>

                        <div class="p-16 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
                            <div fxLayout="row" fxLayoutAlign="start start">
                                <span class="font-weight-300 font-size-72 line-height-72">23</span>
                                <span class="font-weight-300 font-size-48 line-height-48 ml-8 mt-4">°</span>
                                <span class="font-weight-300 font-size-48 line-height-48 mt-4">C</span>
                            </div>
                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-64"></mat-icon>
                        </div>

                        <div class="px-16 pb-4">
                            <div class="pb-8" fxLayout="row" fxLayoutAlign="start center">
                                <mat-icon fontSet="meteocons" fontIcon="icon-wind"
                                          class="icon s-16 mr-16"></mat-icon>
                                <div>23 km/h</div>
                            </div>

                            <div fxLayout="row" fxLayoutAlign="start center">
                                <mat-icon fontSet="meteocons" fontIcon="icon-rainy2"
                                          class="icon s-16 mr-16"></mat-icon>
                                <div>48 %</div>
                            </div>
                        </div>

                        <div class="card-divider"></div>

                        <div class="p-16 pt-4">
                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                <div>Tuesday</div>
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon fontSet="meteocons" fontIcon="icon-sun"
                                              class="icon s-16 mr-16"></mat-icon>
                                    <div class="secondary-text">24°</div>
                                    <div class="disabled-text">/</div>
                                    <div class="disabled-text">12°</div>
                                </div>
                            </div>

                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                <div>Wednesday</div>
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon fontSet="meteocons" fontIcon="icon-sun"
                                              class="icon s-16 mr-16"></mat-icon>
                                    <div class="secondary-text">22°</div>
                                    <div class="disabled-text">/</div>
                                    <div class="disabled-text">14°</div>
                                </div>
                            </div>

                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                <div>Thursday</div>
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
                                              class="icon s-16 mr-16"></mat-icon>
                                    <div class="secondary-text">23°</div>
                                    <div class="disabled-text">/</div>
                                    <div class="disabled-text">13°</div>
                                </div>
                            </div>

                            <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                <div>Friday</div>
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
                                              class="icon s-16 mr-16"></mat-icon>
                                    <div class="secondary-text">25°</div>
                                    <div class="disabled-text">/</div>
                                    <div class="disabled-text">15°</div>
                                </div>
                            </div>

                            <div fxLayout="row" fxLayoutAlign="space-between center">
                                <div>Saturday</div>
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
                                              class="icon s-16 mr-16"></mat-icon>
                                    <div class="secondary-text">24°</div>
                                    <div class="disabled-text">/</div>
                                    <div class="disabled-text">15°</div>
                                </div>
                            </div>
                        </div>

                        <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">FULL REPORT</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16">
                                    <div class="h1">San Francisco</div>
                                    <div class="h4 secondary-text">Mon, 12:30 PM, Mostly Sunny</div>
                                </div>

                                <div class="p-16 pt-0" fxLayout="row" fxLayoutAlign="space-between center">
                                    <div fxLayout="row" fxLayoutAlign="start start">
                                        <span class="font-weight-300 font-size-72 line-height-72">23</span>
                                        <span class="font-weight-300 font-size-48 line-height-48 ml-8 mt-4">°</span>
                                        <span class="font-weight-300 font-size-48 line-height-48 mt-4">C</span>
                                    </div>
                                    <mat-icon fontSet="meteocons" fontIcon="icon-cloudy" class="icon s-64"></mat-icon>
                                </div>

                                <div class="px-16 pb-4">
                                    <div class="pb-8" fxLayout="row" fxLayoutAlign="start center">
                                        <mat-icon fontSet="meteocons" fontIcon="icon-wind"
                                                  class="icon s-16 mr-16"></mat-icon>
                                        <div>23 km/h</div>
                                    </div>

                                    <div fxLayout="row" fxLayoutAlign="start center">
                                        <mat-icon fontSet="meteocons" fontIcon="icon-rainy2"
                                                  class="icon s-16 mr-16"></mat-icon>
                                        <div>48 %</div>
                                    </div>
                                </div>

                                <div class="card-divider"></div>

                                <div class="p-16 pt-4">
                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div>Tuesday</div>
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon fontSet="meteocons" fontIcon="icon-sun"
                                                      class="icon s-16 mr-16"></mat-icon>
                                            <div class="secondary-text">24°</div>
                                            <div class="disabled-text">/</div>
                                            <div class="disabled-text">12°</div>
                                        </div>
                                    </div>

                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div>Wednesday</div>
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon fontSet="meteocons" fontIcon="icon-sun"
                                                      class="icon s-16 mr-16"></mat-icon>
                                            <div class="secondary-text">22°</div>
                                            <div class="disabled-text">/</div>
                                            <div class="disabled-text">14°</div>
                                        </div>
                                    </div>

                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div>Thursday</div>
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
                                                      class="icon s-16 mr-16"></mat-icon>
                                            <div class="secondary-text">23°</div>
                                            <div class="disabled-text">/</div>
                                            <div class="disabled-text">13°</div>
                                        </div>
                                    </div>

                                    <div class="mb-12" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div>Friday</div>
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
                                                      class="icon s-16 mr-16"></mat-icon>
                                            <div class="secondary-text">25°</div>
                                            <div class="disabled-text">/</div>
                                            <div class="disabled-text">15°</div>
                                        </div>
                                    </div>

                                    <div fxLayout="row" fxLayoutAlign="space-between center">
                                        <div>Saturday</div>
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon fontSet="meteocons" fontIcon="icon-cloudy"
                                                      class="icon s-16 mr-16"></mat-icon>
                                            <div class="secondary-text">24°</div>
                                            <div class="disabled-text">/</div>
                                            <div class="disabled-text">15°</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">FULL REPORT</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 18 -->

            <!-- CARD 19 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="light-blue-600">

                            <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                <div class="pr-16">
                                    <div class="h1 font-weight-300">Google Inc.</div>
                                    <div class="h5 secondary-text">NASDAQ: GOOG</div>
                                </div>

                                <div>
                                    <button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
                                        <mat-icon>more_vert</mat-icon>
                                    </button>

                                    <mat-menu #card19Menu="matMenu">
                                        <button mat-menu-item>
                                            <mat-icon>trending_up</mat-icon>
                                            <span>Trend</span>
                                        </button>
                                        <button mat-menu-item>
                                            <mat-icon>history</mat-icon>
                                            <span>History</span>
                                        </button>
                                        <button mat-menu-item>
                                            <mat-icon>notifications_off</mat-icon>
                                            <span>Disable alerts</span>
                                        </button>
                                    </mat-menu>
                                </div>
                            </div>

                            <div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end">
                                <div class="font-size-48 font-weight-300 line-height-1">540.48</div>
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <mat-icon>trending_up</mat-icon>
                                    <div class="ml-8">2.29 (2.05%)</div>
                                </div>
                            </div>

                        </div>

                        <mat-tab-group backgroundColor="accent">
                            <mat-tab label="1DAY">
                                <div class="h-200 my-16">
                                    <ngx-charts-line-chart
                                        *fuseIfOnDom
                                        [scheme]="card19.scheme"
                                        [results]="card19.data"
                                        [xAxis]="false"
                                        [yAxis]="true"
                                        [yScaleMin]="'538'"
                                        [yScaleMax]="'541'">
                                    </ngx-charts-line-chart>
                                </div>
                            </mat-tab>

                            <mat-tab label="1WEEK">
                                <div class="h-200 my-16">
                                    <ngx-charts-line-chart
                                        *fuseIfOnDom
                                        [scheme]="card19.scheme"
                                        [results]="card19.data"
                                        [xAxis]="false"
                                        [yAxis]="true"
                                        [yScaleMin]="'538'"
                                        [yScaleMax]="'541'">
                                    </ngx-charts-line-chart>
                                </div>
                            </mat-tab>

                            <mat-tab label="1MONTH">
                                <div class="h-200 my-16">
                                    <ngx-charts-line-chart
                                        *fuseIfOnDom
                                        [scheme]="card19.scheme"
                                        [results]="card19.data"
                                        [xAxis]="false"
                                        [yAxis]="true"
                                        [yScaleMin]="'538'"
                                        [yScaleMax]="'541'">
                                    </ngx-charts-line-chart>
                                </div>
                            </mat-tab>
                        </mat-tab-group>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="light-blue-600">

                                    <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="pr-16">
                                            <div class="h1 font-weight-300">Google Inc.</div>
                                            <div class="h5 secondary-text">NASDAQ: GOOG</div>
                                        </div>

                                        <div>
                                            <button mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
                                                <mat-icon>more_vert</mat-icon>
                                            </button>

                                            <mat-menu #card19Menu="matMenu">
                                                <button mat-menu-item>
                                                    <mat-icon>trending_up</mat-icon>
                                                    <span>Trend</span>
                                                </button>
                                                <button mat-menu-item>
                                                    <mat-icon>history</mat-icon>
                                                    <span>History</span>
                                                </button>
                                                <button mat-menu-item>
                                                    <mat-icon>notifications_off</mat-icon>
                                                    <span>Disable alerts</span>
                                                </button>
                                            </mat-menu>
                                        </div>
                                    </div>

                                    <div class="p-16 pt-8" fxLayout="row" fxLayoutAlign="space-between end">
                                        <div class="font-size-48 font-weight-300 line-height-1">540.48</div>
                                        <div fxLayout="row" fxLayoutAlign="start center">
                                            <mat-icon>trending_up</mat-icon>
                                            <div class="ml-8">2.29 (2.05%)</div>
                                        </div>
                                    </div>

                                </div>

                                <mat-tab-group backgroundColor="accent">
                                    <mat-tab label="1DAY">
                                        <div class="h-200 my-16">
                                            <ngx-charts-line-chart
                                                *fuseIfOnDom
                                                [scheme]="card19.scheme"
                                                [results]="card19.data"
                                                [xAxis]="false"
                                                [yAxis]="true"
                                                [yScaleMin]="'538'"
                                                [yScaleMax]="'541'">
                                            </ngx-charts-line-chart>
                                        </div>
                                    </mat-tab>

                                    <mat-tab label="1WEEK">
                                        <div class="h-200 my-16">
                                            <ngx-charts-line-chart
                                                *fuseIfOnDom
                                                [scheme]="card19.scheme"
                                                [results]="card19.data"
                                                [xAxis]="false"
                                                [yAxis]="true"
                                                [yScaleMin]="'538'"
                                                [yScaleMax]="'541'">
                                            </ngx-charts-line-chart>
                                        </div>
                                    </mat-tab>

                                    <mat-tab label="1MONTH">
                                        <div class="h-200 my-16">
                                            <ngx-charts-line-chart
                                                *fuseIfOnDom
                                                [scheme]="card19.scheme"
                                                [results]="card19.data"
                                                [xAxis]="false"
                                                [yAxis]="true"
                                                [yScaleMin]="'538'"
                                                [yScaleMax]="'541'">
                                            </ngx-charts-line-chart>
                                        </div>
                                    </mat-tab>
                                </mat-tab-group>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 19 -->

            <!-- CARD 20 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                            <div class="h1 pr-16">Top campaigns</div>

                            <div>
                                <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
                                    <mat-icon>more_vert</mat-icon>
                                </button>

                                <mat-menu #card20Menu="matMenu">
                                    <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
                                        <mat-icon color="accent">check_box</mat-icon>
                                        <span>Show Clicks</span>
                                    </button>
                                    <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
                                        <mat-icon color="accent">check_box</mat-icon>
                                        <span>Show Conversion</span>
                                    </button>
                                    <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
                                        <mat-icon>check_box_outline_blank</mat-icon>
                                        <span>Show CPC</span>
                                    </button>
                                </mat-menu>
                            </div>
                        </div>

                        <table class="simple clickable">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th class="text-right">Clicks</th>
                                    <th class="text-right">Conv</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Holiday Travel</td>
                                    <td class="text-right">3621</td>
                                    <td class="text-right">90</td>
                                </tr>
                                <tr>
                                    <td>Get Away Deals</td>
                                    <td class="text-right">703</td>
                                    <td class="text-right">7</td>
                                </tr>
                                <tr>
                                    <td>Airfare</td>
                                    <td class="text-right">532</td>
                                    <td class="text-right">0</td>
                                </tr>
                                <tr>
                                    <td>Vacation</td>
                                    <td class="text-right">201</td>
                                    <td class="text-right">8</td>
                                </tr>
                                <tr>
                                    <td>Hotels</td>
                                    <td class="text-right">94</td>
                                    <td class="text-right">4</td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="card-divider full-width"></div>

                        <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">GO TO CAMPAIGNS</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                    <div class="h1 pr-16">Top campaigns</div>

                                    <div>
                                        <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
                                            <mat-icon>more_vert</mat-icon>
                                        </button>

                                        <mat-menu #card20Menu="matMenu">
                                            <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
                                                <mat-icon color="accent">check_box</mat-icon>
                                                <span>Show Clicks</span>
                                            </button>
                                            <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
                                                <mat-icon color="accent">check_box</mat-icon>
                                                <span>Show Conversion</span>
                                            </button>
                                            <button fxLayout="row" fxLayoutAlign="start center" mat-menu-item>
                                                <mat-icon>check_box_outline_blank</mat-icon>
                                                <span>Show CPC</span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </div>

                                <table class="simple clickable">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th class="text-right">Clicks</th>
                                            <th class="text-right">Conv</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Holiday Travel</td>
                                            <td class="text-right">3621</td>
                                            <td class="text-right">90</td>
                                        </tr>
                                        <tr>
                                            <td>Get Away Deals</td>
                                            <td class="text-right">703</td>
                                            <td class="text-right">7</td>
                                        </tr>
                                        <tr>
                                            <td>Airfare</td>
                                            <td class="text-right">532</td>
                                            <td class="text-right">0</td>
                                        </tr>
                                        <tr>
                                            <td>Vacation</td>
                                            <td class="text-right">201</td>
                                            <td class="text-right">8</td>
                                        </tr>
                                        <tr>
                                            <td>Hotels</td>
                                            <td class="text-right">94</td>
                                            <td class="text-right">4</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="card-divider full-width"></div>

                                <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">GO TO CAMPAIGNS</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 20 -->

            <!-- CARD 21 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16 pb-0" fxLayout="row" fxLayoutAlign="space-between center">
                            <div class="h1 pr-16">Schedule</div>

                            <mat-form-field>
                                <mat-select class="simplified" value="today">
                                    <mat-option value="today">Today</mat-option>
                                    <mat-option value="yesterday">Yesterday</mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>

                        <mat-list>
                            <mat-list-item>
                                <h3 matLine>Group Meeting</h3>
                                <p matLine>
                                    <span class="secondary-text">In 32 minutes -</span>
                                    <span class="text-bold">Room 1B</span>
                                </p>
                            </mat-list-item>

                            <mat-list-item>
                                <h3 matLine>Coffee Break</h3>
                                <p matLine>
                                    <span class="secondary-text">10:30AM</span>
                                </p>
                            </mat-list-item>

                            <mat-list-item>
                                <h3 matLine>Public Beta Release</h3>
                                <p matLine>
                                    <span class="secondary-text">11:00AM</span>
                                </p>
                            </mat-list-item>

                            <mat-list-item>
                                <h3 matLine>Lunch</h3>
                                <p matLine>
                                    <span class="secondary-text">12:10PM</span>
                                </p>
                            </mat-list-item>

                            <mat-list-item>
                                <h3 matLine>Dinner with David</h3>
                                <p matLine>
                                    <span class="secondary-text">17:30PM</span>
                                </p>
                            </mat-list-item>
                        </mat-list>

                        <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
                            <button mat-button color="accent">SEE COMPLETE SCHEDULE</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                    <div class="h1 pr-16">Top campaigns</div>

                                    <div>
                                        <button mat-icon-button [matMenuTriggerFor]="card20Menu" aria-label="more">
                                            <mat-icon>more_vert</mat-icon>
                                        </button>

                                        <mat-menu #card20Menu="matMenu">
                                            <button mat-menu-item>
                                                <mat-icon color="accent">check_box</mat-icon>
                                                <span>Show Clicks</span>
                                            </button>
                                            <button mat-menu-item>
                                                <mat-icon color="accent">check_box</mat-icon>
                                                <span>Show Conversion</span>
                                            </button>
                                            <button mat-menu-item>
                                                <mat-icon>check_box_outline_blank</mat-icon>
                                                <span>Show CPC</span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </div>

                                <table class="simple clickable">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Clicks</th>
                                            <th>Conv</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Holiday Travel</td>
                                            <td>3621</td>
                                            <td>90</td>
                                        </tr>
                                        <tr>
                                            <td>Get Away Deals</td>
                                            <td>703</td>
                                            <td>7</td>
                                        </tr>
                                        <tr>
                                            <td>Airfare</td>
                                            <td>532</td>
                                            <td>0</td>
                                        </tr>
                                        <tr>
                                            <td>Vacation</td>
                                            <td>201</td>
                                            <td>8</td>
                                        </tr>
                                        <tr>
                                            <td>Hotels</td>
                                            <td>94</td>
                                            <td>4</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="p-8 pt-16" fxLayout="row" fxLayoutAlign="start center">
                                    <button mat-button color="accent">SEE COMPLETE SCHEDULE</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 21 -->

            <!-- CARD 22 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                            <div class="pr-16">
                                <div class="h1 font-weight-300">Sales Reports</div>
                            </div>

                            <div>
                                <button mat-icon-button [matMenuTriggerFor]="card22Menu" aria-label="more">
                                    <mat-icon>more_vert</mat-icon>
                                </button>

                                <mat-menu #card22Menu="matMenu">
                                    <button mat-menu-item>
                                        <mat-icon>history</mat-icon>
                                        <span>History</span>
                                    </button>
                                    <button mat-menu-item>
                                        <mat-icon>notifications_off</mat-icon>
                                        <span>Disable alerts</span>
                                    </button>
                                </mat-menu>
                            </div>
                        </div>

                        <mat-tab-group>
                            <mat-tab label="1WEEK">
                                <div class="p-16">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
                                        cursus. In sodales pretium ultrices.
                                    </p>
                                    <p>
                                        Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
                                        Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim
                                        rutrum enim, vel tempor sapien arcu a tellus.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
                                        cursus. In sodales pretium ultrices.
                                    </p>
                                </div>
                            </mat-tab>

                            <mat-tab label="2WEEKS">
                                <div class="p-16">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
                                        cursus. In sodales pretium ultrices.
                                    </p>
                                    <p>
                                        Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
                                        Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim
                                        rutrum enim, vel tempor sapien arcu a tellus.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
                                        cursus. In sodales pretium ultrices.
                                    </p>
                                </div>
                            </mat-tab>

                            <mat-tab label="3WEEKS">
                                <div class="p-16">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
                                        cursus. In sodales pretium ultrices.
                                    </p>
                                    <p>
                                        Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
                                        Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim
                                        rutrum enim, vel tempor sapien arcu a tellus.
                                    </p>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante
                                        augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam
                                        cursus. In sodales pretium ultrices.
                                    </p>
                                </div>
                            </mat-tab>
                        </mat-tab-group>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                    <div class="pr-16">
                                        <div class="h1 font-weight-300">Sales Reports</div>
                                    </div>

                                    <div>
                                        <button mat-icon-button [matMenuTriggerFor]="card22Menu" aria-label="more">
                                            <mat-icon>more_vert</mat-icon>
                                        </button>

                                        <mat-menu #card22Menu="matMenu">
                                            <button mat-menu-item>
                                                <mat-icon>history</mat-icon>
                                                <span>History</span>
                                            </button>
                                            <button mat-menu-item>
                                                <mat-icon>notifications_off</mat-icon>
                                                <span>Disable alerts</span>
                                            </button>
                                        </mat-menu>
                                    </div>
                                </div>

                                <mat-tab-group>
                                    <mat-tab label="1WEEK">
                                        <div class="p-16">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
                                                consequat aliquam cursus. In sodales pretium ultrices.
                                            </p>
                                            <p>
                                                Maecenas lectus est, sollicitudin consectetur felis nec, feugiat
                                                ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices
                                                porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
                                            </p>
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
                                                consequat aliquam cursus. In sodales pretium ultrices.
                                            </p>
                                        </div>
                                    </mat-tab>

                                    <mat-tab label="2WEEKS">
                                        <div class="p-16">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
                                                consequat aliquam cursus. In sodales pretium ultrices.
                                            </p>
                                            <p>
                                                Maecenas lectus est, sollicitudin consectetur felis nec, feugiat
                                                ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices
                                                porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
                                            </p>
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
                                                consequat aliquam cursus. In sodales pretium ultrices.
                                            </p>
                                        </div>
                                    </mat-tab>

                                    <mat-tab label="3WEEKS">
                                        <div class="p-16">
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
                                                consequat aliquam cursus. In sodales pretium ultrices.
                                            </p>
                                            <p>
                                                Maecenas lectus est, sollicitudin consectetur felis nec, feugiat
                                                ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices
                                                porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
                                            </p>
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis
                                                ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam
                                                consequat aliquam cursus. In sodales pretium ultrices.
                                            </p>
                                        </div>
                                    </mat-tab>
                                </mat-tab-group>

                            </div>

                        </textarea>
                    </fuse-highlight>
                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 22 -->

            <!-- CARD 23 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16 pb-0">
                            <div class="h1 font-weight-300">Shopping List</div>
                        </div>

                        <div class="card-divider"></div>

                        <mat-selection-list class="pt-0 pb-16">
                            <mat-list-option checkboxPosition="before" selected>Milk</mat-list-option>
                            <mat-list-option checkboxPosition="before">Tomatoes</mat-list-option>
                            <mat-list-option checkboxPosition="before" selected>Green Apples</mat-list-option>
                            <mat-list-option checkboxPosition="before" selected>Chocolate Bar</mat-list-option>
                            <mat-list-option checkboxPosition="before">Break</mat-list-option>
                            <mat-list-option checkboxPosition="before">Eggs</mat-list-option>
                            <mat-list-option checkboxPosition="before" selected>Lettuce</mat-list-option>
                            <mat-list-option checkboxPosition="before">Pickles</mat-list-option>
                        </mat-selection-list>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16 pb-0">
                                    <div class="h1 font-weight-300">Shopping List</div>
                                </div>

                                <div class="card-divider"></div>

                                <mat-selection-list class="pt-0 pb-16">
                                    <mat-list-option checkboxPosition="before" selected>Milk</mat-list-option>
                                    <mat-list-option checkboxPosition="before">Tomatoes</mat-list-option>
                                    <mat-list-option checkboxPosition="before" selected>Green Apples</mat-list-option>
                                    <mat-list-option checkboxPosition="before" selected>Chocolate Bar</mat-list-option>
                                    <mat-list-option checkboxPosition="before">Break</mat-list-option>
                                    <mat-list-option checkboxPosition="before">Eggs</mat-list-option>
                                    <mat-list-option checkboxPosition="before" selected>Lettuce</mat-list-option>
                                    <mat-list-option checkboxPosition="before">Pickles</mat-list-option>
                                </mat-selection-list>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 23 -->

            <!-- CARD 24 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16">
                            <div class="h1 font-weight-300">Sessions by device</div>
                        </div>

                        <div class="h-200">
                            <ngx-charts-pie-chart
                                [scheme]="card24.scheme"
                                [results]="card24.devices"
                                [doughnut]="true">
                            </ngx-charts-pie-chart>
                        </div>

                        <div class="p-16" fxLayout="row" fxLayoutAlign="center center">
                            <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
                                <div class="h4 secondary-text">Desktop</div>
                                <div class="h2 font-weight-300 py-8">92.8%</div>
                                <div fxLayout="row" fxLayoutAlign="center center">
                                    <mat-icon class="s-18 pr-4 red-fg">
                                        arrow_downward
                                    </mat-icon>

                                    <div class="h5 red-fg">
                                        -0.6%
                                    </div>
                                </div>
                            </div>

                            <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
                                <div class="h4 secondary-text">Mobile</div>
                                <div class="h2 font-weight-300 py-8">6.1%</div>
                                <div fxLayout="row" fxLayoutAlign="center center">
                                    <mat-icon class="s-18 pr-4 green-fg">
                                        arrow_upward
                                    </mat-icon>

                                    <div class="h5 green-fg">
                                        +0.7%
                                    </div>
                                </div>
                            </div>

                            <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
                                <div class="h4 secondary-text">Tablet</div>
                                <div class="h2 font-weight-300 py-8">1.1%</div>
                                <div fxLayout="row" fxLayoutAlign="center center">
                                    <mat-icon class="s-18 pr-4 green-fg">
                                        arrow_upward
                                    </mat-icon>

                                    <div class="h5 green-fg">
                                        +0.1%
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-divider mb-0"></div>

                        <div class="px-16" fxLayout="row" fxLayoutAlign="space-between center">
                            <mat-form-field>
                                <mat-select class="simplified" value="7days">
                                    <mat-option value="today">Today</mat-option>
                                    <mat-option value="yesterday">Yesterday</mat-option>
                                    <mat-option value="7days">Last 7 days</mat-option>
                                    <mat-option value="28days">Last 28 days</mat-option>
                                    <mat-option value="90days">Last 90 days</mat-option>
                                </mat-select>
                            </mat-form-field>

                            <button mat-button color="accent">OVERVIEW</button>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16">
                                    <div class="h1 font-weight-300">Sessions by device</div>
                                </div>

                                <div class="h-200">
                                    <ngx-charts-pie-chart
                                        [scheme]="card24.scheme"
                                        [results]="card24.devices"
                                        [doughnut]="true">
                                    </ngx-charts-pie-chart>
                                </div>

                                <div class="p-16" fxLayout="row" fxLayoutAlign="center center">
                                    <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
                                        <div class="h4 secondary-text">Desktop</div>
                                        <div class="h2 font-weight-300 py-8">92.8%</div>
                                        <div fxLayout="row" fxLayoutAlign="center center">
                                            <mat-icon class="s-18 pr-4 red-fg">
                                                arrow_downward
                                            </mat-icon>

                                            <div class="h5 red-fg">
                                                -0.6%
                                            </div>
                                        </div>
                                    </div>

                                    <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
                                        <div class="h4 secondary-text">Mobile</div>
                                        <div class="h2 font-weight-300 py-8">6.1%</div>
                                        <div fxLayout="row" fxLayoutAlign="center center">
                                            <mat-icon class="s-18 pr-4 green-fg">
                                                arrow_upward
                                            </mat-icon>

                                            <div class="h5 green-fg">
                                                +0.7%
                                            </div>
                                        </div>
                                    </div>

                                    <div class="px-16" fxLayout="column" fxLayoutAlign="start center">
                                        <div class="h4 secondary-text">Tablet</div>
                                        <div class="h2 font-weight-300 py-8">1.1%</div>
                                        <div fxLayout="row" fxLayoutAlign="center center">
                                            <mat-icon class="s-18 pr-4 green-fg">
                                                arrow_upward
                                            </mat-icon>

                                            <div class="h5 green-fg">
                                                +0.1%
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-divider mb-0"></div>

                                <div class="px-16" fxLayout="row" fxLayoutAlign="space-between center">
                                    <mat-form-field>
                                        <mat-select class="simplified" value="7days">
                                            <mat-option value="today">Today</mat-option>
                                            <mat-option value="yesterday">Yesterday</mat-option>
                                            <mat-option value="7days">Last 7 days</mat-option>
                                            <mat-option value="28days">Last 28 days</mat-option>
                                            <mat-option value="90days">Last 90 days</mat-option>
                                        </mat-select>
                                    </mat-form-field>

                                    <button mat-button color="accent">OVERVIEW</button>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 24 -->

            <!-- CARD 25 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16">
                            <div class="h5 secondary-text">Conversion</div>
                            <div class="font-size-54 font-weight-300 line-height-1 mt-8">492</div>
                        </div>

                        <div class="p-16 pt-0">
                            <span class="green-fg">+22%</span>
                            of target
                        </div>

                        <div class="h-80">
                            <ngx-charts-bar-vertical
                                [scheme]="card25.scheme"
                                [results]="card25.data">
                            </ngx-charts-bar-vertical>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16">
                                    <div class="h5 secondary-text">Conversion</div>
                                    <div class="font-size-54 font-weight-300 line-height-1 mt-8">492</div>
                                </div>

                                <div class="p-16 pt-0">
                                    <span class="green-fg">+22%</span>
                                    of target
                                </div>

                                <div class="h-80">
                                    <ngx-charts-bar-vertical
                                        [scheme]="card25.scheme"
                                        [results]="card25.data">
                                    </ngx-charts-bar-vertical>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 25 -->

            <!-- CARD 26 -->
            <div class="card">

                <!-- PREVIEW -->
                <div class="card-preview">

                    <div class="fuse-card">

                        <div class="p-16">
                            <div class="h5 secondary-text">Impressions</div>
                            <div class="font-size-54 font-weight-300 line-height-1 mt-8">87.4M</div>
                        </div>

                        <div class="p-16 pt-0">
                            <span class="green-fg">+12.3%</span>
                            of target
                        </div>

                        <div class="h-80">
                            <ngx-charts-line-chart
                                [scheme]="card26.scheme"
                                [results]="card26.data"
                                [curve]="card26.curve">
                            </ngx-charts-line-chart>
                        </div>

                    </div>

                </div>
                <!-- / PREVIEW -->

                <!-- SOURCE -->
                <div class="card-source" fxHide fxShow.gt-sm>

                    <fuse-highlight lang="html">
                        <textarea #source>

                            <div class="fuse-card">

                                <div class="p-16">
                                    <div class="h5 secondary-text">Impressions</div>
                                    <div class="font-size-54 font-weight-300 line-height-1 mt-8">87.4M</div>
                                </div>

                                <div class="p-16 pt-0">
                                    <span class="green-fg">+12.3%</span>
                                    of target
                                </div>

                                <div class="h-80">
                                    <ngx-charts-line-chart
                                        [scheme]="card26.scheme"
                                        [results]="card26.data"
                                        [curve]="card26.curve">
                                    </ngx-charts-line-chart>
                                </div>

                            </div>

                        </textarea>
                    </fuse-highlight>

                </div>
                <!-- / SOURCE -->

            </div>
            <!-- / CARD 26 -->

        </div>

    </div>
    <!-- / CONTENT -->

</div>
